<template>
    <div class="main">
        <div class="box">
            <p>编辑组件</p>
            <div class="col-sm-12 btn">
                <el-button type="text" @click="dialogVisible = true" size="mini">选择表</el-button>
                <el-button type="text" @click="btClick" size="mini">进入仪表盘</el-button>
            </div>
            <div class="col-sm-12 list" style="height: 100%; width: 100%; padding: 0px">
                <Draggable :listdata="items" class="list-label"></Draggable>
            </div>
        </div>
        <el-dialog
            title="选择表"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <ChooseTable @child-event="childClick"></ChooseTable>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue'
    import ChooseTable from '@/views/commonView/ChooseTable'
    import DraggableView from '@/views/commonView/DraggableView'
    import tree from '@/views/commonView/tree'
    import {DATA_QUERY, UPDATE_COMMON} from '@api/url'

    Vue.component('ChooseTable', ChooseTable)
    Vue.component('Draggable', DraggableView)

    export default {
        name: 'LableView',
        props: ['unitId'],
        data() {
            return {
                dialogVisible: false,
                items: [],
                previewItems: [],
                tableName: ''
            }
        },
        watch:{
            items(val){
                let fields=JSON.stringify(val)
               sessionStorage.setItem('allFields',fields)
            }
        },
        methods: {
            onConfirm() {
                this.dialogVisible = false
                this.items = [...this.previewItems]
                this.$emit('tableName', this.tableName)
            },
            childClick: function (fileds, tableName) {
                this.previewItems = fileds;
                this.tableName = tableName;
            },
            handleClose: function (done) {
                this.$confirm('确认关闭？')
                    .then((_) => {
                        done()
                    })
                    .catch((_) => {
                    })
            },
            btClick: function () {
                this.$emit('center')
            }
        },
        mounted() {
            if (this.unitId) {
                let vm = this
                let param = {
                    unitId: this.unitId,
                    type: '1'
                }
                // 数据集id
                vm.$http.post(UPDATE_COMMON, param).then((res) => {
                    let p = {}
                    p.optMode = '1'
                    p.modelId = res.data.body.modelId
                    p.humpNameFlag = true
                    // 获取表字段信息
                    vm.$http.post(DATA_QUERY, p).then((res) => {
                        let list = res.data.data
                        let arr = []
                        let len = 0
                        list.forEach((v, i) => {
                            let a = {}

                            a.id = tree.UUID(16)
                            len = parseInt(v.fldLen)
                            if (len < 80) {
                                len = 80
                            }
                            a.width = len
                            a.name = v.humpName
                            a.value = v.fldCnname;
                            a.modelId=p.modelId;
                            a.dataType=v.fldType;
                            a.colName=v.fldEnname;
                            a.jsonData=v.jsonData;
                            arr.push(a)
                        })
                        vm.items = arr
                    })
                })
            }
        },
        computed: {}
    }
</script>

<style lang="less" scoped>
    .main {
        .box{
            display: flex;
            flex-direction: column;
            .btn {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .list{
                width: 0;
                flex: 1;
                overflow: auto;
            }
        }

    }

    .list {
        border-top: 1px solid black;
    }

    #change-btn {
        width: 60%;
        height: 32px;
        margin: 5px auto;
    }

    .list-label {
        width: 100%;
        height: 100%;
        // padding-left: 10px;
        display: inline-block;
    }

    .label-li {
        height: 22px;
        padding: 5px 5px 5px 10px;
        border-radius: 4px;
        margin: 5px auto;
    }

    #btton {
        width: 70px;
        // height: 25px;
        position: relative;
        left: 10px;
    }

    .draggable {
        width: 100%;
        height: 100%;
    }
</style>
